<template>
  <div class="container">
    <header>
      <h1>房产资讯</h1>
    </header>
    <!-- start -->
    <div class="ad">
      <div class="swiper-container">
        <swiper :options="swiperOption" v-if="adList.length>0">
          <swiper-slide v-for="(item,index) in adList" :key="index">
            <p>
              最新资讯
              <span>0{{index+1}}/0{{adList.length}}</span>
            </p>
            <h1>北京市行情</h1>
            <p>开发商资金链普遍吃紧，包图正式拉开全国房企全国房企</p>
            <img :src="item.imgPath" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- end -->
    <section class="content">
      <h1>
        热门资讯
        <span>
          <a href="infomore.html">更多&gt;</a>
        </span>
      </h1>
      <ul class="case">
        <li v-for="item in getInfoList" :key="item.id">
          <a href="#">
            <img :src="item.mainImg" class="img-left fl" />
            <div class="text fr">
              <p>{{item.title}}</p>
              <div>{{item.type}}</div>
              <span>
                <img src="images/icon1.jpg" />
                {{item.commentNumber}}
              </span>
              <span>
                <img src="images/icon2.jpg" />
                {{item.praise}}
              </span>
            </div>
          </a>
        </li>
      </ul>
      <p v-on:click="getMore" style="text-align: center;margin-bottom:1.5rem">{{LoadMore}}</p>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "info",
  data() {
    return {
      adList: [],
      page: 1, //  页码
      LoadMore: "加载更多...",
      swiperOption: {
        speed: 500,
        autoplay: true,
        slidesPerView: 1.2,
        paginationClickable: true,
        spaceBetween: 30,
      },
    };
  },
  components: {},
  methods: {
    //方法
    getMore() {
      if (
        this.$store.state.info.infoList.length >= this.$store.state.info.max_len
      ) {
        // this.LoadMore='没有更多了...'
        return;
      }

      this.$store.dispatch("getInfoList", ++this.page);
    },
  },
  mounted: function () {
    this.$axios({
      method: "get",
      url: "./data/ad_data.json",
    })
      .then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.adList = data.info_ad;
        }
      })
      .catch(function (err) {
        console.log(err);
      });

    this.$store.dispatch("getInfoList", this.page);
  },
  computed: {
    //	计算属性
    getInfoList() {
      return this.$store.state.info.infoList;
    },
  },
};
</script>

<style scoped lang="less" rel="stylesheet/less">
header {
  height: 0.7rem;
  margin: 0.35rem 0.25rem 0;
  font-size: 0.28rem;
}

header p {
  font-size: 0.48rem;
}

.ad {
  /* height: 6.3rem; */
  margin-left: 0.39rem;
  margin-top: 0.47rem;
  overflow: hidden;
  position: relative;
}

.ad p:nth-child(1) {
  font-size: 0.3rem;
  color: #fbac7c;
}

.ad p:nth-child(1) span {
  color: #7a7a7a;
  font-size: 0.25rem;
  float: right;
}

.ad p:nth-child(1)::after {
  content: "";
  display: block;
  clear: both;
}

.ad h1 {
  margin-top: 0.19rem;
  color: #424241;
  font-size: 0.42rem;
}

.ad p:nth-child(3) {
  margin-top: 0.14rem;
  color: #424242;
  font-size: 0.32rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0.23rem;
}

.ad img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.16rem;
}

.ad ul {
  /* width: 20.7rem; */
  width: 27.6rem;
  position: relative;
  top: 0;
  left: 0;
}

.ad ul li {
  width: 6.75rem;
  float: left;
  margin-right: 0.15rem;
}

.content {
  margin: 0 0.3rem 1.2rem;
}

.content h1 {
  font-size: 0.48rem;
  margin: 0.45rem 0;
}

.content h1 span {
  float: right;
  font-size: 0.34rem;
  color: #b4b4b4;
}

.content h1 span a {
  color: inherit;
  text-decoration: none;
}

.content .case li img.img-left {
  width: 2.05rem;
  height: 1.52rem;
}

.content .case li .text {
  width: 4.51rem !important;
  height: 1.52rem !important;
  position: relative;
}

.content .case li .text p {
  font-size: 0.36rem;
  line-height: 0.46rem;
  color: #7c7c7c;
}

.content .case li .text div {
  display: inline-block;
  padding: 0.07rem;
  color: #ff3b3d;
  font-size: 0.26rem;
  background-color: f6f6f6;
  position: absolute;
  left: 0;
  bottom: 0;
}

.content .case li .text span {
  color: #aaaaa8;
  font-size: 0.26rem;
  position: absolute;
  bottom: 0.1rem;
}

.content .case li .text span:nth-last-child(2) {
  right: 1.2rem;
}

.content .case li .text span:nth-last-child(1) {
  right: 0.13rem;
}

.content .case li .text span img {
  width: 0.26rem;
  height: 0.24rem;
  margin-right: 0.1rem;
}
</style>
